<html>
  <head>
    <style>
      del,
      ins {
        display: inline-block;
        padding: 0 0.2em;
      }
      ins {
        text-decoration: none;
        background-color: #d4fcbc;
      }
      a {
        color: inherit;
      }
      a ins {
        text-decoration: inherit;
      }
      del {
        text-decoration: line-through;
        background-color: #fbb6c2;
        color: #555;
      }
      html,
      body {
        user-select: none;
        font-family: 'Microsoft YaHei', 'Arial Narrow', sans-serif;
        height: 100%;
        margin: 0;
        width: 100%;
      }
      .fileTitle {
        padding: 0.2em;
        font-size: 24px;
      }
    </style>
  </head>
  <body></body>
  <script src="../htmldiff/assert/html-diff.js"></script>
  <script src="../htmldiff/assert/WT.js"></script>
  <script>
    let $ = WT.$ // 引入sky前端框架
    let fileAddDel = {{d.addDel}}
    let fileDiffArr = {{d.modify}}
    let fg = $Fg() // 创建文档碎片
    for (let i = 0; i < fileDiffArr.length / 3; i++) { // [文件链接，旧版本此文件内容，最新版本此文件内容]
      let elm = fg.adElm('', 'DETAILS')
      elm
        .adElm('', 'SUMMARY') // 创建SUMMARY元素 ，设置fileTitle类
        .cn('fileTitle')
        .h(`<a href="${fileDiffArr[i * 3]}" target="_blank" rel="noopener noreferrer">修改 ${fileDiffArr[i * 3]}</a>`) // 防止异源修改
      elm
        .adElm('', 'DIV')
        .h(htmlDiff(fileDiffArr[i * 3 + 1], fileDiffArr[i * 3 + 2])) // word-by-word 渲染新旧文档
    }
    for (let i = 0; i < fileAddDel.length / 2; i++) {
      let elm = fg.adElm('', 'DETAILS')
      elm
        .adElm('', 'SUMMARY')
        .cn('fileTitle')
        .h(
          `<a href="${fileAddDel[i * 2]}">${(fileAddDel[i * 2 + 1] === 'A'
            ? '增加 '
            : '删除 ') + fileAddDel[i * 2]}</a>`
        )
    }
    $DB.append(fg)
  </script>
</html>
